<template>
    <div class="dialog-border dialogcontent" style="width:800px;height: 500px;">
        <div class="dialogtitle">
            <div class="title">{{ title }}</div>
            <div class="closebutton" @click="closeDialog"></div>
        </div>

        <div class="borderhr"></div>
        <div class="dialog-main" style="flex-grow: 1;">

            <div class="dialogmsg">{{ message  }}</div>

        </div>
        <div class="borderhr"></div>
        <div class="dialogbuttons">
            <GenshinDialogButton img="/img/ic_dialog_cancel.png" @click="closeDialog" title="取消" width="48%">
            </GenshinDialogButton>
            <GenshinDialogButton img="/img/ic_dialog_ok.png" title="确认" @click="emitChange" width="48%"></GenshinDialogButton>
        </div>

    </div>
</template>
<script>

import GenshinDialogButton from '../components/GenshinDialogButton.vue';
import GenshinButton from '../components/GenshinButton.vue';

export default {
    name: "ConfirmDialog",
    components: { GenshinDialogButton, GenshinButton },
    props: ["title","message"],
    data() {
        return {
            msg: "添加任务",
            taskInfo: {
                _id: "",
                Title: "",
                Content: "",
                EndDate: null,
                CompleteTime: null,
                RelatedFiles: [],
                Location: "",
                TypeLevel: 3,
                IsCompleted: false,
            },

            iscreate:false,
        };
    },
    methods: {
        closeDialog() {
            this.$emit("close");
        },

       
        emitChange(){
            this.$emit("done");
        }
    },
    mounted() {
        
    },
    watch: {

    }
};
</script>

<style scoped>
.dialogcontent {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dialogtitle {
    position: relative;
    width: 100%;
    height: 50px;
}

.title {
    position: absolute;
    left: 0px;
    top: 0px;
    color: rgb(206, 188, 146);
    font-size: 26px;
    font-weight: bold;
    line-height: 50px;
    width: 100%;
    text-align: center;
}

.closebutton {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 20px;
    top: 0px;
    background-color: rgb(206, 188, 146);
    mask-image: url(/img/img_close_button.png);
    mask-size: 60% 60%;
    mask-position: center center;
    mask-repeat: no-repeat;
    -webkit-mask-image: url(/img/img_close_button.png);
    -webkit-mask-size: 60% 60%;
    -webkit-mask-position: center center;
    -webkit-mask-repeat: no-repeat;
    cursor: pointer;
}


.borderhr {
    border-image: url(img/hr_big_border.png) 45 113;
    width: calc(100% - 32px);
    height: 12px;
    border-image-width: 14px 35px 0px 35px;
    border-top: 14px;
    margin-left: 16px;
    margin-right: 16px;
    border-image-outset: 2px 0px;
    opacity: 0.5;
}

.dialogbuttons {
    height: 80px;
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-main {
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    width: 94%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.dialogmsg {
    color: rgb(253, 251, 244);
    font-size: 26px;
    font-weight: bold;
}
</style>